<template>
  <!-- 设备信息组件 -->
  <div class="body">
    <table
      style="
        border-collapse: separate;
        border-spacing: 0px 0.27375rem;
        word-wrap: break-word;
        word-break: break-all;
      "
    >
      <thead>
        <tr class="title">
          <th class="one">设备名称</th>
          <th>在线状态</th>
          <th>是否故障</th>
        </tr>
      </thead>
      <tbody id="body1">
        <tr class="info" v-for="item in DATA">
          <td>{{ item.sos_name }}</td>
          <td>{{ item.content }}</td>
          <td>{{ item.createtime }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { sosLog } from "@/api/dashboard";

export default {
  mounted() {
    this.Select();
  },
  data() {
    return {
      DATA: [],
    };
  },
  methods: {
    async Select(type) {
      let { data: res } = await sosLog({
        page: this.currentPage,
      });
      this.DATA = [];
      this.total = Number(res.total);
      console.log(res);
      res.list.forEach((e) => {
        let item = {
          sos_name: e.sos_name,
          createtime: e.createtime,
          content: "1区灯杆不亮",
        };
        this.DATA.push(item);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
table {
  width: 4.850375rem /* 388.03/80 */;
  table-layout: fixed;
  border-collapse: collapse;
  tr {
    height: 0.55rem /* 44/80 */;
    width: 4.65rem /* 372/80 */;
  }
  #body1 tr:nth-child(2n + 1) {
    background: linear-gradient(
      90deg,
      rgba(16, 40, 73, 0) 0%,
      rgba(16, 40, 73, 1) 51.3%,
      rgba(16, 40, 73, 0) 100%
    );
  }
  .title {
    background: url(../../../assets/Home/Deviceinfotitle.png);
  }
  th {
    // margin-left: .55975rem /* 44.78/80 */;
    color: #b1acac;
    font-size: 0.175rem /* 14/80 */;
    width: 0.725rem /* 58/80 */;
  }
  td {
    font-size: 0.175rem /* 14/80 */;
    color: rgba(255, 255, 255, 1);
    text-align: center;
  }
  .info {
    margin-top: 0.27375rem /* 21.9/80 */;
  }
  .typeback {
    width: 0.681625rem /* 54.53/80 */ !important;
    margin: auto;
  }
  .one {
    margin-left: 0px;
  }
}
</style>
